<template>
  <div class="problem-feedback">
    <top-header :title="'问题反馈'">
      <template v-slot:right-operation>
        <van-icon name="todo-list-o"
                  size=".483092rem"
                  @click="goFeedbackRecord" />
      </template>
    </top-header>
    <div class="suggestions">
      <div class="title font-size-18 font-weight-500">问题和意见</div>
      <van-field class="pay-cell-remark__content"
                 v-model="remark"
                 rows="8"
                 autosize
                 type="textarea"
                 maxlength="200"
                 placeholder="请填写10字以上的问题描述以便我们提供更好的帮助"
                 show-word-limit />
      <van-uploader class="upload"
                    v-model="file_list"
                    :max-count="4"
                    :before-read="beforeUpload"
                    :after-read="afterUpload"
                    :before-delete="beforeDelete">
        <template #default>
          <div class="upload-img">
            <div class="upload-img-text">
              <span class="font-size-14">添加照片</span>
              <span class="font-size-14">{{ `${0}/4` }}</span>
            </div>
          </div>
        </template>
      </van-uploader>
      <div class="font-size-14 title-tips">（选填，提供问题截图）</div>
      <div class="title font-size-18 font-weight-500">联系电话</div>
      <div class="font-size-14 title-tips">（选填，便于我们与您联系）</div>
      <van-field v-model="tel"
                 class="telphone"
                 maxlength="11"
                 type="digit" />
      <div class="problem-feedback-button display-center"
           @click="onAdd">
        <van-button type="default">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import upload from '@/utils/upload';
import cookie from '@/utils/cookie';

export default {
  name: 'index',
  components: {
    TopHeader,
  },
  data () {
    return {
      remark: '', //回复
      file_list: [], //组件图片列表
      tel: '', //联系电话
      file_list_to_api: [], //传给后端url数组
    };
  },
  mounted () { },
  methods: {
    onAdd () { //提交
    if(!this.remark) {
      this.$toast.fail("问题和意见不可为空");
      return;
    }
      _api
        .api_userPortal_sysQuestion_create({
          user_id: JSON.parse(cookie.get('userLogin')).id,
          town_id: cookie.get('town_id') || 14,
          content: this.remark,
          img_arr: this.file_list_to_api,
          tel: this.tel,
        })
        .then((res) => {
          this.$toast.success("提交成功");
          this.$router.push("/my");
        })
        .catch((error) => {
          this.$toast.fail("提交失败");
        });
    },
    goFeedbackRecord () { //去往历史反馈
      this.$router.push('/FeedbackRecord');
    },
    beforeUpload (file) { //上传前
      let file_size = ['image/jpeg', 'image/png'].includes(file.type);
      let file_type = file.size / 1024 <= 500;
      if (!file_size) {
        this.$toast.fail('上传图片大小不能超过500KB');
      }
      if (!file_type) {
        this.$toast.fail('存在不支持的文件类型');
      }
      return file_size && file_type;
    },
    async afterUpload (e) { //上传后
      let file_list = [];
      if (!(e instanceof Array)) {
        file_list.push({
          file: e,
        });
      } else {
        e.forEach((item) => {
          file_list.push({
            file: item,
          });
        });
      }
      for (let i = 0; i < file_list.length; i++) {
        let item = file_list[i];
        await upload(
          item.file.file,
          (res) => {
            this.file_list_to_api.push(res.file_url);
          },
          (progress) => {
            console.log(progress);
          },
        );
      }
    },
    beforeDelete (file, file_list) { //删除操作
      this.file_list_to_api.splice(file_list.index, 1);
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.suggestions {
	.title {
		padding: 0.676329rem 0.338164rem 0 0.338164rem;
	}
	.pay-cell-remark__content {
		width: 9.323671rem;
		margin: 0.289855rem 0.338164rem 0.57971rem 0.338164rem;
		background: #f9f9f9;
		border-radius: 6px;

		.van-field__word-limit {
			font-size: 0.338164rem;
			color: #999999;
		}
	}
	.upload {
		padding: 0 0.338164rem;

		.upload-img {
			width: 100%;
			height: 100%;
			font-size: 12px;
			background: url('../../../assets/image/zhaopian@3x.png');
			background-size: 100% 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.upload-img-text {
				display: flex;
				align-items: center;
				flex-direction: column;
				padding-top: 0.483092rem;
				color: #999999;
			}
		}

		::v-deep .van-uploader__input-wrapper {
			width: 2.415459rem;
			height: 2.415459rem;
			border: 1px dashed gray;
		}

		::v-deep .van-uploader__preview-image {
			width: 2.415459rem;
			height: 2.415459rem;
		}
	}

	.title-tips {
		color: #999999;
		padding: 0.096618rem 0.193237rem 0 0.193237rem;
	}

	.telphone {
		display: flex;
		justify-content: center;
		width: 9.371981rem;
		margin: 0 0.338164rem;
		padding: 0.362319rem 0 0 0;
		border-bottom: 1px solid #e8e8e8;
	}

	.problem-feedback-button {
		width: 100%;
		height: 1.15942rem;
		margin: 2.125604rem 0 0.821256rem 0;

		.van-button--default {
			width: 8.405797rem;
			background: linear-gradient(180deg, #adc9fc, #6899f4);
			border-radius: 24px;

			.van-button__icon,
			.van-button__text {
				color: white;
			}
		}
	}
}
</style>
